<template>
    <div class="hdTitle" :class="{ wangyi: title ? true : false }">
        <img class="hd-img1" :class="{ wangyi: title ? true : false }" @click="toTargetPage('/')"
            src="https://yanxuan.nosdn.127.net/f1fd4eeea3f85330d21670ca81d9c65e.png" alt="">
        <div v-if="!title" class="title">值得买</div>
        <div v-else class="titleImg"></div>
        <img class="hd-img2" :class="{ wangyi: title ? true : false }" @click="toTargetPage('/search')"
            src="https://yanxuan.nosdn.127.net/08adb6b3db60250074afb6020dfaa6a5.png" alt="">
        <img class="hd-img3" :class="{ wangyi: title ? true : false }" @click="toTargetPage('/shopCart')"
            src=" https://yanxuan.nosdn.127.net/9574d22277a2eb4819330f5591253edf.png" alt="">
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'HeaderTitle',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({
    title: {
        type: Number,
        required: false,
        default:0
    }
})

const router = useRouter()
// 点击图标跳转到指定页面
function toTargetPage(target: string) {
    router.push({
        path: target
    })
}

</script>

<style lang="less" scoped>
.hdTitle {
    width: 350px;
    height: 50px;
    padding: 0 13px 0 12px;
    background-color: #FAFAFA;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 99;
    &.wangyi {
        height: 44px;
    }

    .hd-img1 {
        position: absolute;
        top: 13.5px;
        left: 12px;
        width: 23px;
        height: 23px;

        &.wangyi {
            top: 9px;
            width: 25.5px;
            height: 26px;
        }
    }

    .hd-img2 {
        position: absolute;
        top: 13.5px;
        right: 57px;
        width: 23px;
        height: 23px;

        &.wangyi {
            top: 10.5px;
        }
    }

    .hd-img3 {
        position: absolute;
        top: 13.5px;
        right: 14px;
        width: 23px;
        height: 23px;

        &.wangyi {
            top: 10px;
            width: 25px;
            height: 24px;
        }
    }

    .title {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -37.5px;
        margin-top: -10px;
        width: 75px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 18px;
        font-family: PingFangSC-Light, helvetica, Helvetica Neue, STHeiTi, Microsoft YaHei, sans-serif;
    }

    .titleImg {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -43px;
        margin-top: -13.5px;
        width: 86px;
        height: 27px;
        background-image: url('https://yanxuan-static.nosdn.127.net/hxm/tetris/common-mobile/sprite/hd.png');
        background-size: 119px 101px;
        background-position: 0 0;

    }

}</style>